<template>
  <div class="head_top">
    <Nav/>
    <el-backtop></el-backtop>
    <div class="header">
      <img style="width:1200px;height:400px;margin-left:18%;object-fit:cover" src="https://pic.qyer.com/album/user/3834/41/QkFWRh4GY00/index?imageMogr2/thumbnail/2400x1800/crop/!1920x640a304a760/format/webp" alt="">
    </div>
    <div class="athorShow">
      <span >
        <img class="authorShow_headImg" :src="`http://localhost:3000/upload/${headImg}`" alt="">
        <h2 style="position: relative;top:-215px;left:570px;color:white">{{title}}</h2>
        <div class="authorShow_name_move">
        <span class="authorShow_name">{{nickName}}</span>
        <span style="font-size: 18px;margin-left:15px;margin-right:15px">|</span>
        <span style="font-size: 18px;">普通用户</span>
        </div>
        <div class="authorShow_time">
          <span><i class="el-icon-time"></i>{{pTime | time}}</span>
          <span style="margin-left:30px"><i class="el-icon-view"></i>{{response+100}}人阅读</span>
        </div>
      </span>
      <div class="authorShow_button">
          <ul class="authorShow_buttons">
            <li class="icon_inerrContent_li" ref="li1" @click="change1()">
              <p class="icon_innerContent"><svg t="1602594291408" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2472" width="30" height="30"><path d="M143.83 378.91a20 20 0 0 0-20 20v448a20 20 0 0 0 40 0v-448a20 20 0 0 0-20-20zM880.64 414.44a91.66 91.66 0 0 0-72.75-35.53H550.31l66.78-136.26a59.39 59.39 0 0 0-53.33-85.53h-74.1a67.21 67.21 0 0 0-57.21 31.6l-70.94 112.81A26.18 26.18 0 0 1 339 313.71a27.05 27.05 0 0 1-26.16-22.43L308.47 266a20 20 0 1 0-39.42 6.8l4.37 25.33a67.09 67.09 0 0 0 64.89 55.62h1.12a66.43 66.43 0 0 0 55.94-30.89L466.31 210a27.43 27.43 0 0 1 23.35-12.9h74.1a19.39 19.39 0 0 1 17.41 27.93l-80.89 165.08a20 20 0 0 0 18 28.8h289.61a52.25 52.25 0 0 1 50.67 65l-74.8 297.39a60.23 60.23 0 0 1-58.48 45.59h-346a60.37 60.37 0 0 1-60.3-60.3V507.24a20 20 0 0 0-40 0v259.34a100.41 100.41 0 0 0 100.3 100.3h346A100.17 100.17 0 0 0 822.55 791l74.8-297.39a91.67 91.67 0 0 0-16.71-79.17z" p-id="2473" fill="#1afa29"></path></svg></p>
              <p class="icon_innerContent_Content">{{likeClick}}点赞</p>
            </li>
            <li class="icon_inerrContent_li" ref="li2" @click="change2()">
              <p class="icon_innerContent"><svg t="1602594505250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4023" width="30" height="30"><path d="M851.349 383.512c43.677 6.347 61.117 60.021 29.512 90.828l-126.42 123.229a53.253 53.253 0 0 0-15.315 47.133l29.844 174.002c7.461 43.5-38.197 76.673-77.263 56.135l-156.263-82.152a53.248 53.248 0 0 0-49.559 0l-156.263 82.152c-39.066 20.538-84.724-12.635-77.263-56.135l29.844-174.002 569.146-261.19z" fill="#1afa29" p-id="4024"></path><path d="M716.565 911.044c-13.231 0.001-26.527-3.19-38.817-9.652L521.484 819.24a23.243 23.243 0 0 0-21.638 0l-156.264 82.152c-28.255 14.854-61.848 12.426-87.673-6.336-25.824-18.763-38.515-49.963-33.119-81.424l29.843-174.002a23.247 23.247 0 0 0-6.686-20.579l-126.42-123.229c-22.858-22.281-30.93-54.98-21.066-85.339s35.615-52.069 67.204-56.659l174.708-25.387a23.248 23.248 0 0 0 17.506-12.719l78.131-158.312C450.138 128.783 478.747 111 510.665 111c0.002 0-0.001 0 0 0 31.92 0 60.526 17.782 74.653 46.406l78.132 158.312a23.25 23.25 0 0 0 17.505 12.719l174.709 25.387c31.589 4.59 57.339 26.301 67.203 56.659s1.792 63.059-21.065 85.339l-126.42 123.229a23.25 23.25 0 0 0-6.687 20.578l29.844 174.003c5.396 31.461-7.294 62.661-33.119 81.424-14.591 10.6-31.667 15.987-48.855 15.988zM510.666 171c-4.346 0-15.076 1.263-20.85 12.96l-78.132 158.312a83.234 83.234 0 0 1-62.682 45.542L174.295 413.2c-12.909 1.876-17.426 11.691-18.769 15.824-1.343 4.132-3.458 14.728 5.883 23.833l126.419 123.229a83.234 83.234 0 0 1 23.942 73.688l-29.843 174.001c-2.205 12.856 5.734 20.186 9.249 22.74 3.516 2.555 12.939 7.838 24.485 1.77l156.264-82.152a83.234 83.234 0 0 1 77.479 0l156.263 82.152c11.548 6.071 20.97 0.785 24.485-1.77s11.454-9.884 9.249-22.74l-29.844-174.002a83.235 83.235 0 0 1 23.942-73.687l126.42-123.229c9.341-9.105 7.226-19.7 5.883-23.833s-5.859-13.948-18.769-15.824l-174.708-25.387a83.237 83.237 0 0 1-62.682-45.541L531.514 183.96c-5.773-11.697-16.503-12.96-20.848-12.96z" fill="#1afa29" p-id="4025"></path></svg></p>
              <p class="icon_innerContent_Content">{{collect}}收藏</p>
            </li>
            <li class="icon_inerrContent_li" ref="li3" @click="change3()">
              <p class="icon_innerContent"><svg t="1602594649079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4889" width="30" height="30"><path d="M834.37778 716.13833l-85.74999 0c-11.879562 0-21.505803-9.657964-21.505803-21.441335 0-11.879562 9.625218-21.537526 21.505803-21.537526l85.74999 0c23.663956 0 42.97886-19.266809 42.97886-42.97886l0-429.788603c0-23.712051-19.314904-42.97886-42.97886-42.97886l-644.682905 0c-23.712051 0-42.97886 19.266809-42.97886 42.97886l0 429.788603c0 23.712051 19.266809 42.97886 42.97886 42.97886l365.224122 0c5.692652 0 11.17655 2.318812 15.173584 6.299473l193.46934 193.404871c8.394181 8.425903 8.394181 22.032806 0 30.379914-4.14132 4.204765-9.673313 6.347568-15.141862 6.347568-5.516644 0-11.048637-2.142803-15.189957-6.347568L546.029536 716.13833 189.694875 716.13833c-47.455825 0-86.005816-38.533618-86.005816-85.957721l0-429.788603c0-47.376007 38.549991-85.957721 86.005816-85.957721l644.682905 0c47.424102 0 85.957721 38.581714 85.957721 85.957721l0 429.788603C920.335501 677.604712 881.801882 716.13833 834.37778 716.13833L834.37778 716.13833zM318.631456 458.265168c-23.760147 0-42.97886-19.218714-42.97886-42.97886s19.218714-42.97886 42.97886-42.97886c23.712051 0 42.97886 19.218714 42.97886 42.97886S342.343507 458.265168 318.631456 458.265168L318.631456 458.265168zM512.004605 458.265168c-23.743774 0-42.97886-19.218714-42.97886-42.97886s19.235087-42.97886 42.97886-42.97886c23.760147 0 42.97886 19.218714 42.97886 42.97886S535.763728 458.265168 512.004605 458.265168L512.004605 458.265168zM705.441199 458.265168c-23.760147 0-42.97886-19.218714-42.97886-42.97886s19.218714-42.97886 42.97886-42.97886c23.712051 0 42.97886 19.218714 42.97886 42.97886S729.15325 458.265168 705.441199 458.265168L705.441199 458.265168z" p-id="4890" fill="#1afa29"></path></svg></p>
              <p class="icon_innerContent_Content">{{response}}回复</p>
            </li>
            <li class="icon_inerrContent_li" ref="li4" @click="change4()" style="border-right:1px solid rgb(233, 233, 233);">
              <p class="icon_innerContent"><svg t="1602594728006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5831" width="30" height="30"><path d="M247.467 561.067c-6.4 0-12.8-2.134-19.2-6.4-14.934-10.667-17.067-29.867-6.4-44.8L384 296.533c10.667-14.933 29.867-17.066 44.8-6.4 14.933 10.667 17.067 29.867 6.4 44.8L273.067 548.267c-6.4 8.533-14.934 12.8-25.6 12.8z m430.933 275.2H672L311.467 755.2c-17.067-4.267-27.734-21.333-23.467-38.4s21.333-27.733 38.4-23.467L686.933 774.4c17.067 4.267 27.734 21.333 23.467 38.4-4.267 14.933-17.067 23.467-32 23.467z" fill="#1afa29" p-id="5832"></path><path d="M477.867 364.8c-19.2 0-36.267-2.133-55.467-8.533-44.8-14.934-78.933-44.8-100.267-87.467-21.333-40.533-23.466-87.467-8.533-132.267 29.867-91.733 128-140.8 219.733-108.8 91.734 29.867 140.8 128 108.8 219.734C618.667 320 550.4 364.8 477.867 364.8z m0-281.6c-17.067 0-34.134 4.267-49.067 10.667-25.6 12.8-44.8 36.266-55.467 64-19.2 57.6 12.8 119.466 68.267 138.666 57.6 19.2 119.467-12.8 138.667-68.266 19.2-57.6-12.8-119.467-68.267-138.667-10.667-4.267-21.333-6.4-34.133-6.4z m341.333 896c-96 0-172.8-78.933-172.8-172.8s76.8-172.8 172.8-172.8S992 712.533 992 806.4s-76.8 172.8-172.8 172.8z m0-283.733c-59.733 0-108.8 49.066-108.8 108.8s49.067 108.8 108.8 108.8S928 864 928 804.267s-46.933-108.8-108.8-108.8zM192 834.133c-96 0-172.8-78.933-172.8-172.8s76.8-172.8 172.8-172.8 172.8 76.8 172.8 172.8-76.8 172.8-172.8 172.8z m0-283.733c-59.733 0-108.8 49.067-108.8 108.8S132.267 768 192 768s108.8-49.067 108.8-108.8S251.733 550.4 192 550.4z" fill="#1afa29" p-id="5833"></path></svg></p>
              <p class="icon_innerContent_Content" style="padding-left:33px">分享</p>
            </li>
         
          </ul>
               <div class="shareWith" v-if="status">
                <span style="margin-left:10px;"><svg t="1603088148144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13486" width="40" height="40"><path d="M294.033 294.964c-10.619 0-21.179 4.32-28.618 11.819-7.44 7.5-11.819 17.939-11.819 28.618 0 10.559 4.32 21.119 11.819 28.618 7.5 7.38 17.999 11.759 28.618 11.759 10.559 0 21.119-4.38 28.558-11.819 7.5-7.5 11.819-18.059 11.819-28.558 0-10.679-4.32-21.119-11.819-28.618-7.44-7.5-17.999-11.819-28.558-11.819zM600.074 512.751c-8.279 0-16.499 3.42-22.379 9.239s-9.299 14.039-9.299 22.379 3.42 16.499 9.239 22.379 14.159 9.239 22.439 9.239 16.499-3.42 22.379-9.239 9.239-14.039 9.239-22.379-3.42-16.499-9.239-22.379-14.159-9.239-22.379-9.239zM500.241 375.779c10.559 0 21.119-4.38 28.618-11.819 7.44-7.5 11.759-18.059 11.759-28.618 0-10.679-4.32-21.119-11.759-28.618-7.559-7.44-18.119-11.759-28.618-11.759-10.619 0-21.119 4.32-28.618 11.819s-11.819 17.939-11.819 28.618c0 10.559 4.32 21.119 11.819 28.618 7.5 7.38 17.999 11.759 28.618 11.759zM836.34 32h-648.681c-85.915 0-155.511 69.836-155.511 156.051v647.902c0 86.214 69.596 156.051 155.511 156.051h648.741c85.915 0 155.511-69.836 155.511-156.051v-647.902c-0.060-86.214-69.657-156.051-155.571-156.051zM392.308 675.162c-36.298 0-65.575-7.44-101.933-14.579l-101.693 50.997 29.098-87.534c-72.835-50.937-116.393-116.513-116.393-196.368 0-138.532 131.033-247.485 290.982-247.485 143.092 0 268.423 87.054 293.562 204.348-9.239-1.081-18.599-1.74-28.018-1.74-138.233 0-247.365 103.193-247.365 230.266 0 21.239 3.3 41.517 8.939 61.015-8.999 0.601-18.059 1.081-27.178 1.081zM821.461 777.095l21.899 72.655-79.795-43.737c-29.098 7.321-58.375 14.639-87.354 14.639-138.412 0-247.425-94.614-247.425-211.187 0-116.333 109.013-211.187 247.425-211.187 130.793 0 247.185 94.794 247.185 211.187 0 65.696-43.497 123.772-101.933 167.63zM758.585 512.751c-8.279 0-16.499 3.42-22.379 9.239s-9.239 14.039-9.239 22.379 3.42 16.499 9.239 22.379 14.099 9.239 22.379 9.239 16.499-3.42 22.379-9.239 9.239-14.039 9.239-22.379-3.42-16.499-9.239-22.379-14.099-9.239-22.379-9.239z" p-id="13487" fill="#1afa29"></path></svg></span>
                <span style="margin-left:10px"><svg t="1603087971843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9626" width="40" height="40"><path d="M870.332005 0 153.667995 0C66.634794 0 0 66.634794 0 153.667995L0 870.332005c0 87.033201 66.634794 153.667995 153.667995 153.667995L870.332005 1024c87.033201 0 153.667995-66.634794 153.667995-153.667995L1024 153.667995C1024 66.634794 957.365206 0 870.332005 0L870.332005 0zM848.573705 457.60425c-34.677291 39.436919-153.328021 158.427623-153.328021 158.427623s5.099602 9.85923 5.099602 19.718459l0 5.099602c-79.213811-5.099602-158.427623-5.099602-222.682603-19.718459 84.313413-59.495352 133.609562-89.073041 227.782205-168.286853-98.932271-24.818061-331.814077-24.818061-396.069057 5.099602 104.031873 5.099602 188.005312 9.85923 272.318725 19.718459-39.436919 39.436919-143.468792 108.791501-227.782205 173.386454 98.932271 19.718459 237.641434 14.958831 356.292165-5.099602l39.436919-9.85923c-5.099602 9.85923-29.577689 14.958831-39.436919 19.718459 9.85923 54.39575 24.818061 143.468792 29.577689 178.146082 5.099602 19.718459-14.958831 34.677291-29.577689 24.818061-49.636122-24.818061-193.104914-104.031873-193.104914-104.031873s-143.468792 79.213811-193.104914 104.031873c-14.958831 5.099602-34.677291-5.099602-29.577689-24.818061 5.099602-54.39575 34.677291-222.682603 34.677291-222.682603l-158.427623-158.427623c-9.85923-14.958831-5.099602-34.677291 14.958831-39.436919 49.636122-5.099602 217.922975-34.677291 217.922975-34.677291s69.354582-153.328021 94.172643-202.964143c5.099602-14.958831 24.818061-14.958831 34.677291 0 19.718459 49.636122 94.172643 202.964143 94.172643 202.964143s158.427623 24.818061 212.823373 34.677291C858.432935 417.827357 863.532537 437.88579 848.573705 457.60425L848.573705 457.60425zM848.573705 457.60425" p-id="9627" fill="#1296db"></path></svg></span>
                <span style="margin-left:10px"><svg t="1603088087465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11378" width="40" height="40"><path d="M437.248 472.405333c-131.072 6.144-237.226667 76.458667-237.226667 163.84 0 87.381333 106.154667 153.258667 237.226667 147.114667 131.072-6.144 237.568-88.064 237.568-175.786667C674.816 520.533333 568.661333 466.261333 437.248 472.405333L437.248 472.405333 437.248 472.405333zM526.677333 692.906667c-40.277333 51.882667-119.466667 77.141333-196.949333 35.498667C293.205333 708.266667 294.570667 669.013333 294.570667 669.013333s-15.36-123.562667 116.736-138.922667C543.402667 514.730667 566.954667 641.024 526.677333 692.906667L526.677333 692.906667 526.677333 692.906667zM438.272 609.962667c-8.533333 6.144-10.24 17.749333-5.461333 25.258667 4.437333 7.509333 14.677333 8.192 22.869333 2.048 8.192-6.485333 11.264-17.749333 6.826667-25.258667C458.069333 604.842667 448.170667 602.794667 438.272 609.962667L438.272 609.962667 438.272 609.962667zM375.808 627.029333c-24.576 2.389333-42.325333 23.893333-42.325333 44.714667 0 20.48 19.797333 34.816 44.373333 31.744 24.576-2.730667 44.373333-21.845333 44.373333-42.325333C422.570667 640.682667 404.138667 624.298667 375.808 627.029333L375.808 627.029333 375.808 627.029333zM845.824 35.84 181.248 35.84c-80.213333 0-145.408 65.194667-145.408 145.408l0 664.234667c0 80.213333 65.194667 145.408 145.408 145.408l664.234667 0c80.213333 0 145.408-65.194667 145.408-145.408L990.890667 181.248C991.232 101.034667 926.037333 35.84 845.824 35.84L845.824 35.84 845.824 35.84zM791.893333 665.941333c-53.930667 114.688-232.448 170.666667-364.544 160.426667-125.610667-9.898667-287.061333-51.541333-303.786667-203.434667 0 0-8.874667-68.949333 58.026667-157.696 0 0 95.914667-134.144 207.530667-172.373333 111.957333-37.888 124.928 26.282667 124.928 64.512-5.802667 32.426667-17.066667 51.2 24.917333 38.229333 0 0 109.909333-50.858667 155.306667-5.802667 36.522667 36.522667 6.144 86.698667 6.144 86.698667s-15.018667 16.725333 16.042667 22.869333C747.861333 505.514667 846.165333 550.912 791.893333 665.941333L791.893333 665.941333 791.893333 665.941333zM683.690667 348.501333c-11.946667 0-21.504-9.557333-21.504-21.504 0-11.946667 9.557333-21.845333 21.504-21.845333 0 0 134.826667-24.917333 118.784 119.808 0 0.682667 0 1.365333-0.341333 2.389333-1.365333 10.24-10.581333 18.090667-21.162667 18.090667-11.946667 0-21.845333-9.557333-21.845333-21.504C759.125333 423.936 780.288 327.338667 683.690667 348.501333L683.690667 348.501333 683.690667 348.501333zM911.36 464.554667 911.36 464.554667c-3.754667 24.576-16.042667 26.624-30.378667 26.624-17.408 0-31.402667-10.922667-31.402667-28.330667 0-15.018667 6.144-30.378667 6.144-30.378667 1.706667-6.485333 16.384-45.738667-9.557333-104.448-47.786667-80.554667-144.384-81.578667-155.989333-77.141333-11.605333 4.437333-28.330667 6.826667-28.330667 6.826667-17.408 0-31.402667-14.336-31.402667-31.402667 0-14.336 9.557333-26.624 22.869333-30.378667 0 0 0.341333-0.341333 0.682667-0.682667 1.024-0.341333 2.048-1.024 3.072-1.365333 13.312-2.730667 61.44-11.946667 107.861333-1.024C848.554667 212.309333 962.901333 292.864 911.36 464.554667L911.36 464.554667 911.36 464.554667zM911.36 464.554667" p-id="11379" fill="#8a8a8a"></path></svg></span>
              </div>
      </div>
    </div>
    <div class="contentShow">
      <div class="contentShow_left">
        <div class="contentShow_left_Tag">
          <el-tag  style="margin-left:40px">{{label}}</el-tag>
          <el-tag  style="margin-left:40px">二刺猿</el-tag>
          <el-tag style="margin-left:40px">头像</el-tag>
        </div>
        <div class="contentShow_left_matter" style="margin-left:80px" v-html="detailText">
         </div>
          <div class="contentShow_left_comment" ref="pinglun">
            <p style="border-bottom:4px solid #ccc">
            <span style="font-size:40px;font-weight:bolder;">|</span>
            <span style="font-size:25px;font-weight:bolder;">用户评论</span>
            </p>
            <div style="margin-left:60px" v-for="(item,index) in newComments" :key="index">
            <p style="margin-top:40px;">
             <p style="width:900px;height:100px"> <!-- <p class="contentShow_left_comment_info"> -->
                <img class="contentShow_left_comment_info_headImg" :src="`http://localhost:3000/upload/${item.headImg}`" alt="">
                <span class="contentShow_left_comment_info">
                  <span class="contentShow_left_comment_info_name">{{item.nickName}}</span>
                  <span class="contentShow_left_comment_info_name" v-if="false">{{item.acId}}</span>
                  <span class="contentShow_left_comment_info_name" style="padding-left:30px">{{item.lv}}</span>
                  <span class="contentShow_left_comment_info_name"><button style="width:70px;color:white;height:20px;border:none;background-color:red;border-radius:5px" @click="concernIt(item.uId)">+关注</button></span>
                  <span class="contentShow_left_comment_info_name" style="padding-left:350px;color:black">{{index+1}}F</span>
                </span>
              </p>
              <p class="contentShow_left_comment_info_contents">{{item.content}}</p>
              <p class="contentShow_left_comment_info_time">
                <span>{{item.pTime | time}}</span>
                <span style="padding-left:450px;cursor:default" v-if="cal!=index" @click="loveIt(index,item.likeClick,item.acId)">赞同({{item.likeClick}})</span>
                <span style="padding-left:450px;cursor:default" v-else @click="loveIt(index,item.likeClick,item.acId)">已赞同({{item.likeClick}})</span>
              </p>
            </p>
            </div>

          </div>
        
      </div>
     
    </div>
    
        <div v-if="show" @click="changeShow">
          <div id="smartGuideFeng" style="bottom: 300px; display: block; left: 0px;">
          <div class="xiaofeng-hide"></div>
          <div class="sg-xiaofeng-hide-eye-l-v3" style="bottom: 82px; left: 3.77457px;"></div>
          <div class="sg-xiaofeng-hide-eye-r-v3" style="bottom: 38px; left: 3.60116px;"></div>
          <div class="sg-xiaofeng-hide-notice"></div>
        </div>
     </div>
     <div class="writeIt" v-else>
       <p style="font-size:20px;font-family:微软雅黑;margin-left:20px">写评论</p>
        <p>
          </el-input>
          <div style="margin: 20px 0;"></div>
          <el-input style="width:400px;margin-left:20px"
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="100"
            show-word-limit
          >
          </el-input>
        </p>
        <p style="margin-top:30px;margin-left:300px">
            <span><el-button type="primary" style="outline:none;" icon="el-icon-close" circle @click="changeShow"></el-button></span>
            <span style="margin-left:40px"><el-button style="outline:none;" type="success" icon="el-icon-check" @click="publish" circle></el-button></span>
            
        </p>
     </div>
  </div>
</template>

<script>
import Nav from '../../components/Nav.vue'
export default {
  data(){
    return {
          urls: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
        ],
        title:'',
        likeClick:0,
        response:0,
        detailText:``,
        label:'',
        headImg:'',
        nickName:'',
        pTime:'',
        collect:0,
        status:false,
        newComments:[],
        cal:1,
        textarea:'',
        show:true
    }
  },
    components:{
    Nav
  },
    filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
  },
  methods:{
      change1(){
        if(this.$refs.li1.style.backgroundColor == "rgb(235, 235, 250)"){
          this.$refs.li1.style.backgroundColor = "rgb(240, 240, 240)"
          this.likeClick-=1
        }else{
          this.$refs.li1.style.backgroundColor = "rgb(235, 235, 250)"
          this.likeClick+=1
        }
        
      },
      change2(){
        if(this.$refs.li2.style.backgroundColor == "rgb(235, 235, 250)"){
          this.$refs.li2.style.backgroundColor = "rgb(240, 240, 240)"
          this.collect-=1
        }else{
          this.$refs.li2.style.backgroundColor = "rgb(235, 235, 250)"
          this.collect+=1
        }
      },
      change3(){
        this.$refs["pinglun"].scrollIntoView(true);
      },
      change4(){
        if(this.status == false){
          this.status = true
        }else{
          this.status = false
        }
      },
      loveIt(index,likeClick,acId){
        console.log(acId)
        if(this.cal==index){
          this.cal=100
          this.newComments[index].likeClick-=1
          likeClick+=1
          this.$axios.get("http://localhost:3000/articleContent/loveIt",{params:{acId:acId,likeClick:likeClick}})
          .then(res=>{
            console.log('res',res)
          })
          .catch(err=>{
            console.log('err',err)
          })
        }else{
          this.cal=index
          this.newComments[index].likeClick+=1
          likeClick+=1
          this.$axios.get("http://localhost:3000/articleContent/loveIt",{params:{acId:acId,likeClick:likeClick}})
          .then(res=>{
            console.log('res',res)
          })
          .catch(err=>{
            console.log('err',err)
          })
        }
        
      },
      changeShow(){
        if(this.show){
          this.show = false
        }else{
          this.show = true
        }
      },
      concernIt(userId){
        this.$axios.get("http://localhost:3000/articleContent/getConcerns",{params:{uId:this.$store.state.ownUid}})
            .then(res=>{
            let info = res.data.data
            for(let i=0;i<info.length;i++){
              if(info[i].bConcern == userId){
                alert("您已经关注过此用户，无需再次关注")
              }else{
                  this.$axios.get("http://localhost:3000/articleContent/concernIt",{params:{uId:this.$store.state.ownUid,bConcern:userId}})
                .then(res=>{
                    console.log('res',res)
                  })
                .catch(err=>{
                    console.log('err',err)
                  })
              }
            }
          })
        .catch(err=>{
            console.log('err',err)
          })  
      },
      publish(){
        if(this.textarea){
          this.$axios.get('http://localhost:3000/articleContent/publishComment',{params:{aId:this.$store.state.aId,uId:this.$store.state.ownUid,textarea:this.textarea}})
          .then(res=>{
            console.log('res',res)
          })
          .catch(err=>{
            console.log('err',err)
          })
        }
      }
  },
  created(){
    this.$axios.get("http://localhost:3000/articleContent/ContentDetail",{params:{aId:this.$store.state.aId,uId:this.$store.state.ownUid}})
    .then(res=>{
      console.log('res',res)
      let infos = res.data.data
      this.title = infos[0].title
      this.likeClick = infos[0].likeClick
      this.response = infos[0].response
      this.detailText = infos[0].detailText
      this.label = infos[0].label
      this.headImg = infos[0].headImg
      this.nickName = infos[0].nickName
      this.pTime = infos[0].pTime
      this.collect = infos[0].collect
    })
    .catch(err=>{
      console.log('err',err)
    })

    this.$axios.get('http://localhost:3000/articleContent/getArticleComment',{params:{aId:this.$store.state.aId}})
    .then(res=>{
      console.log('res',res)
      this.newComments = res.data.data
    })
    .catch(err=>{
      console.log('err',err)
    })
  }
}

</script>
<style lang='scss' scoped>
/deep/.el-textarea__inner{
  height: 150px;
}
.writeIt{
  width: 500px;
  height: 300px;
  // border: 2px solid #ccc;
  background-color: white;
  position: fixed;
  left: 0;
  z-index:10;
  bottom: 25%;
}
#smartGuideFeng {
    display: none;
    bottom: 30px;
    position: fixed;
    left: 0px;
    height: 190px;
    width: 50px;
    z-index: 100;
}
#smartGuideFeng .xiaofeng-hide {
    position: absolute;
    bottom: 0px;
    width: 50px;
    height: 131px;
    background: url('../../assets/images/xiaofeng-hide-v2.png') no-repeat;
}
#smartGuideFeng div.sg-xiaofeng-hide-eye-l-v3 {
    padding: 0px;
    position: absolute;
    left: -2px;
    bottom: 82px;
    width: 8px;
    height: 8px;
    background: url('../../assets/images/eye-hide-v26.png') no-repeat bottom;
    z-index: 101;
}
#smartGuideFeng div.sg-xiaofeng-hide-eye-r-v3 {
    padding: 0px;
    position: absolute;
    left: -2px;
    bottom: 38px;
    width: 8px;
    height: 8px;
    background: url('../../assets/images/eye-hide-v26.png') no-repeat bottom;
    z-index: 101;
}
#smartGuideFeng .sg-xiaofeng-hide-notice {
    position: absolute;
    left: 30px;
    top: 60px;
    height: 22px;
    width: 22px;
    background: #FF9D00;
    border-radius: 50%;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    color: white;
    display: none;
}
 
.head_top{
  height: 100%;
}
.shareWith{
  width:180px;
  height: 50px;
  margin-left: 260px;
  // margin-top: 20px;
  position: relative;
  top: 10px;
  // border: 1px solid #ccc;
}
/deep/input, button, select, optgroup, textarea{
  line-height: 0em;
}
.contentShow_left_comment_info_time{
  width: 650px;
  padding-left: 130px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin-top: 10px;
  font-size: 14px;
}
.contentShow_left_comment_info_contents{
  width: 650px;
  padding-left: 130px;
  font-size: 16px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5em;
  margin-top: 20px;
}
/deep/.el-button span{
  font-size: 10px;
  text-align: center;
  padding-left: -10px;
  line-height: 10px;
}
.contentShow_left_comment_info_name{
  font-size: 15px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  padding-left: 50px;
  line-height: 50px;
  color: red;
}
.contentShow_left_comment_info_headImg{
  width:90px;
  height:90px;
  border-radius:50%;
  float: left;
  position: relative;
  z-index: 10;
  // top: -20px;
  // right: 50px;
}
.contentShow_left_comment_info{
  width: 700px;
  height: 50px;
  background-color: #d3dce6;//rgb(246, 246, 246)
  position: relative;
  // left: 50px;
  right: 20px;
  top: 20px;
  display: block;
  z-index: 1;
  float: left;
}
.contentShow_left_comment{
  width: 900px;
  // height: 600px;
  // background-color: black;
}
.ztext {
    word-break: break-word;
    line-height: 1.6;
}
.RichContent {
    line-height: 1.67;
}

.ztext>:first-child {
    margin-top: 0;
}
.ztext p {
    margin: 1.4em 0;
}
body, button, p, pre {
    margin: 0;
}
.contentShow_left_matter{
  width: 900px;
  line-height: 1.5em;
}
.contentShow_left_Tag{
  width: 900px;
  height: 50px;
  // background-color: yellow;
  margin-top: 20px;
  margin-left: 40px;
}
*, *::before, *::after {
  box-sizing: inherit !important;
}
.contentShow{
  width: 1200px;
  // height: 600px;
  height:100%;
  position: relative;
  left: 50%;
  margin-left: -600px;
 // background-color: red;
  
}
.contentShow_left{
  width: 900px;
  // background-color: black;
  // float: left;
  // clear: both;
}
.contentShow_right{
  width: 300px;
  height: 200px;
  background-color: yellow;
  position: fixed;
  left: 1250px;
  top: 650px;
  // float: right;
}
.icon_innerContent_Content{
  padding-left:30px;
  font-size:15px;
  font-family:黑体;
}
.icon_inerrContent_li{
  width:98px;
  height:78px;
  float: left;
  border-left:1px solid rgb(240, 224, 224);
  padding-top:25px;
  margin-top: -24px;
  // background-color: rgb(235, 235, 250);
}
.icon_innerContent{
    padding-left: 34px;
}
.authorShow_buttons{
  list-style: none;
  // margin-top: 15px;
}
.authorShow_button{
  width: 400px;
  height: 80px;
  // background: black;
  position: relative;
  top: -295px;
  left: 1150px;
}
.authorShow_time{
  width: 400px;
  height: 50px;
  position: relative;
  left: 570px;
  top: -195px;
}
i{
  width: 30px;
  height: 30px;
}
/deep/.el-icon-time:before{
  font-size: 20px;
  color: #ccc;
  
}
/deep/.el-icon-view:before{
  font-size: 20px;
  color: #ccc;
}
.authorShow_name_move{
  width: 400px;
  height: 50px;
  position: relative;
  left: 570px;
  top: -180px;
}
.authorShow_name{
  font-size: 18px;
  font-weight: bolder;
}

.header{
  width: 100%;
  height: 400px;
  // background-color: blue;
  background-image: url(https://pic.qyer.com/album/user/3834/41/QkFWRh4GY00/index?imageMogr/v2/thumbnail/x520/blur/30x30);
  overflow: scroll;
}
.athorShow{
  width: 100%;
  height: 105px;
  // background-color: blue;
  background-color: rgb(240, 240, 240);
 

}
.authorShow_headImg{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid white;
  position: relative;
  left: 380px;
  top: -80px;
}
</style>
